<template>
  <el-table class="tableData" ref="tableData" :data="tableData" :show-header="false" element-loading-text="加载中" element-loading-spinner="el-icon-loading" :show-overflow-tooltip="true" v-loading="loading">
    <el-table-column>
      <template slot-scope="scope">
        <el-checkbox class="check-box" v-model="scope.row.isChecked"></el-checkbox>
        <!-- 实体 和非脸书推特...重点人物重点组织多媒体文档的社交动态-->
        <div class="twitter-info object_info" v-if="scope.row.belongGroup ==='socialaccount'||scope.row.belongGroup==='keyfigures'||scope.row.belongGroup==='focusgroup'||scope.row.belongGroup==='document'||scope.row.belongGroup==='media'||(scope.row.belongGroup ==='socialdynamic'&&scope.row.type===null)" @click="rowClick(scope.row)">
          <div class="user-container">
            <div class="user-icon pointer" @click.stop="handlerClick(scope.row)">
              <img :src="scope.row.iconUrl" class="user-icon" alt="">
            </div>
            <div class="user-label pointer">
              <div class="flex-scope.row">
                <h4 @click.stop="handlerClick(scope.row)">{{scope.row.showName?scope.row.showName:scope.row.displayName}}</h4>
                <span>@{{scope.row.name}}</span>
                <span class="postTime">{{scope.row.postTime}}</span>
              </div>
            </div>
          </div>
          <div class="tag">
            <el-tag type="success" v-for="(tag,listIndex) in scope.row.tags" size="mini" :key="tag" class="tag_list">{{tag}}
              <el-popover placement="top" width="160" trigger="click">
                <p style="padding:10px 0">确定删除此标签吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="primary" size="mini" @click.stop="delTag(scope.row.rowkey,tag,listIndex,scope.row)">确定</el-button>
                </div>
                <span class="x" title="删除" slot="reference" @click.stop="eventPreventDefault">x</span>
              </el-popover>
            </el-tag>
            <el-button size='mini' type="primary" plain style="height:26px" @click.stop="setTags(scope.row)">设置标签</el-button>
            <el-button v-if="scope.row.belongGroup=='socialaccount'||scope.row.belongGroup=='keyfigures'||scope.row.belongGroup=='focusgroup'" size='mini' type="primary" plain style="height:26px;float:right;margin-bottom:5px;margin-right:5px;" @click.stop="setGroup(scope.row)">移动到分组</el-button>
          </div>
          <div v-if="scope.row.description!=null">
            <template v-if="scope.row.description!=null">
              <div class="post-content content"><span style="color:#888">最近活动情况:</span>{{scope.row.description}}</div>
            </template>
            <div v-else v-show="scope.row.objectType==='com.scistor.object.entity'"><span style="color:#888;margin-left:20px;">最近活动情况:</span>{{scope.row.description}}</div>
          </div>
          <i title="添加到目标分析" class="icon iconfont icon-icon associationGraph" @click.stop="handleAddToGraph(scope.row)"></i>
        </div>
        <!-- 脸书推特微博...实体 -->
        <div class="object_info"
        :class="{'twitter-info':scope.row.type==='twitter','facebook-info':scope.row.type==='facebook','linkedin-info':scope.row.type==='linkedin','weibo-info':scope.row.type==='weibo'}"
        @click="rowClick(scope.row)" v-if="scope.row.belongGroup === 'socialdynamic'&&scope.row.type!=null"
        >
          <div class="user-container">
            <div class="user-icon pointer" @click.stop="handlerClick(scope.row)">
              <img :src="scope.row.iconUrl" class="user-icon" alt="">
            </div>
            <div class="user-label pointer">
              <div class="flex-info">
                <h4 @click.stop="handlerClick(scope.row)">{{scope.row.showName?scope.row.showName:scope.row.displayName}}</h4>
                <span>@{{scope.row.name}}</span>
                <span class="postTime">{{scope.row.postTime}}</span>
              </div>
            </div>
          </div>
          <div class="tag">
            <el-tag type="success" v-for="(tag,listIndex) in scope.row.tags" size="mini" :key="tag" class="tag_list">{{tag}}
              <el-popover placement="top" width="160" trigger="click">
                <p style="padding:10px 0">确定删除此标签吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="primary" size="mini" @click.stop="delTag(scope.row.rowkey,tag,listIndex,scope.row)">确定</el-button>
                </div>
                <span class="x" title="删除" slot="reference" @click.stop="eventPreventDefault">x</span>
              </el-popover>
            </el-tag>
            <el-button size='mini' type="primary" plain style="height:26px" @click.stop="setTags(scope.row)">设置标签</el-button>
          </div>
          <div class="content">
            {{scope.row.postContent}}
          </div>
          <!-- twitter -->
          <div class="quantitative-statistics" v-if="scope.row.type==='twitter'">
            <span class="operation ">
              <i class="fa fa-heart-o"></i>{{scope.row.likeCount}}
            </span>
            <span class="operation ">
              <i class="fa fa-comment-o"></i>{{scope.row.replyCount}}
            </span>
            <span class="operation">
              <i class="fa fa-retweet" style="font-weight:noraml"></i>{{scope.row.forwardCount}}
            </span>
          </div>
          <!-- Facebook -->
          <div class="quantitative-statistics" v-if="scope.row.type==='facebook'">
            <span class="operation ">
              <i class="fa fa-thumbs-o-up"></i>{{scope.row.likeCount}}
            </span>
            <span class="operation ">
              <i class="fa fa-comment-o"></i>{{scope.row.replyCount}}
            </span>
            <span class="operation">
              <i class="fa fa-share" style="font-weight:noraml"></i>{{scope.row.forwardCount}}
            </span>
          </div>
          <!-- linkedin -->
          <div class="quantitative-statistics" v-if="scope.row.type==='linkedin'">
            <span class="operation ">
              <i class="fa fa-thumbs-o-up"></i>{{scope.row.likeCount}}
            </span>
            <span class="operation ">
              <i class="fa fa-comment-o"></i>{{scope.row.replyCount}}
            </span>
            <span class="operation">
              <i class="fa fa-share" style="font-weight:noraml"></i>{{scope.row.forwardCount}}
            </span>
          </div>
          <!-- weibo -->
          <div class="quantitative-statistics" v-if="scope.row.type==='weibo'">
            <span class="operation ">
              <i class="fa fa-thumbs-o-up"></i>{{scope.row.likeCount}}
            </span>
            <span class="operation ">
              <i class="fa fa-comment-o"></i>{{scope.row.replyCount}}
            </span>
            <span class="operation">
              <i class="fa fa-share" style="font-weight:noraml"></i>{{scope.row.forwardCount}}
            </span>
          </div>
          <i title="添加到目标分析" class="icon iconfont icon-icon associationGraph" @click.stop="handleAddToGraph(scope.row)"></i>
        </div>
      </template>
    </el-table-column>
  </el-table>

</template>
<script>
import { deleteTag } from '@/api/workBench'
import util from '@/utils'
export default {
    props: {
        tableData: Array,
        loading: Boolean
    },
    data () {
        return {
            dialogVisible: false
        }
    },
    mounted () {
    // 默认点击第一行
    // this.$nextTick(() => {
    //     if (this.tableData.length > 0) {
    //         this.handlerClick(this.tableData[0])
    //     }
    // })
    },
    methods: {
        eventPreventDefault () {},
        // 点击表格
        rowClick (row, event, column) {
            this.$emit('showProperty', row)
        },
        handlerClick (row) {
            // 高亮显示选中的行
            this.$refs.tableData.setCurrentRow(row)
            this.$emit(
                'handlerClick',
                row.objectType,
                row.rowkey,
                row.objectUri,
                row.name,
                row.displayName,
                row.iconUrl,
                row.belongGroup
            )
        },
        jumpToObjShow (row) {
            console.log(row)
            this.$emit(
                'jumpToObjShow',
                row.objectType,
                row.rowkey,
                row.objectUri,
                row.name,
                row.displayName,
                row.iconUrl,
                row.belongGroup
            )
        },
        getObjectType (type) {
            let dataType = type.split('.')
            dataType = dataType[dataType.length - 1]
            return dataType
        },
        // 添加到目标分析
        handleAddToGraph (row) {
            util.addToRelationGraph({
                name: row.name,
                image: row.iconUrl,
                objecttype: row.objectType,
                objecturi: row.objectUri,
                rowkey: row.rowkey,
                displayName: row.displayName
            })
        },
        // 添加到地图
        handleAddToMap (row) {
            this.$emit(
                'handlerClick',
                row.objectType,
                row.objectUri,
                row.rowkey,
                row.name,
                row.displayName,
                row.iconUrl,
                true
            )
        },
        // 删除标签
        delTag (rowkey, tag, listIndex, item) {
            let params = {
                rowkey: rowkey,
                tag: tag,
                objecturi: item.objectUri
            }
            deleteTag(params).then(response => {
                if (response.status == 200) {
                    this.$message.success('成功删除标签')
                    item.tags.splice(listIndex, 1)
                } else {
                    this.$message.error('删除标签失败')
                }
            })
        },
        // 设置标签
        setTags (data) {
            this.$emit('openSetTagsDialog', data)
        },
        setGroup (data) {
            this.$emit('openSetGroupDialog', data)
        }
    }
}
</script>
<style lang="less" scoped>
.tableData {
  position: relative;
  width: 100%;
  overflow-y: auto;
  .check-box {
    position: absolute;
    top: 13px;
    left: 21px;
  }
}
.tag {
  margin-left: 72px;
  margin-top: -16px;
  .el-tag {
    margin-right: 5px;
  }
}
.group-btn {
  height: 26px;
  float: right;
  margin-top: 7px;
  margin-right: 5px;
}
.weibo-info {
  margin: 5px 0;
  background: #fff;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
      }
      .fa-vimeo-square {
        background: yellow;
        color: red;
      }
      .tag {
        padding: 2px 8px;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 5px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
}
.linkedin-info {
  margin: 5px 0;
  background: #fff;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
      }
      .tag {
        padding: 2px 8px;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 10px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
}
.facebook-info {
  margin: 5px 0;
  background: #fff;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
        color: #409eff;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
        right: 10px;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 5px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
}
.associationGraph {
  display: inline-block;
  // float: right;
  position: absolute;
  right: 10px;
  bottom: 5px;
  cursor: pointer;
  color: #1169c4;
  opacity: 0;
  margin-top: 5px;
  margin-bottom: 6px;
}
.object_info {
  padding-bottom: 20px !important;
}
.object_info:hover .icon-icon {
  opacity: 1;
}
.oneTable:hover .associationGraph {
  opacity: 1;
}
.twitter-info {
  margin: 5px 0;
  margin-left: 12px;
  background: #fff;
  padding: 5px 0;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
        color: #409eff;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
        right: 10px;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 5px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
  .tag_list {
    // width: 300px;
    margin: 10px 3px;
  }
  .tag_list .x {
    opacity: 0;
    font-size: 14px;
  }
  .tag_list:hover .x {
    opacity: 1;
  }
  .x:hover {
    font-weight: bold;
  }
  &:hover {
    cursor: pointer;
  }
}
</style>
